﻿@{
    Layout = null;
    List<department> departments = ViewData["departmentList"] as List<department>;
    List<role> roles = ViewData["roleList"] as List<role>;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>
</head>
<body>

    <div class="Content">
        @* 搜索区域 *@
        <div class="search">
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <input type="text" placeholder="请输入数据字典类型" id="strName" class="layui-input">
                    <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-search" id="btnSearch"></i>
                    </div>
                </div>
            </div>
        </div>

        @* 表格 *@
        <div class="table">
            <table class="layui-hide" id="ID-treeTable-demo"></table>
        </div>
    </div>

    @* 头部操作栏 *@
    <script type="text/html" id="TPL-treeTable-demo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addInfo">添加</button>
        </div>
    </script>

    @* 操作列 *@
    <script type="text/html" id="TPL-treeTable-demo-tools">
        <div class="layui-btn-container">
          <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete">删除</a>
        </div>
    </script>


    @* 添加/编辑案件类别信息 *@
    <div id="divContent" style="display:none;">
        <form class="layui-form" lay-filter="formInfo">

            @* 用户编码 *@
            <div class="layui-form-item">
                <label class="layui-form-label">用户编码</label>
                <div class="layui-input-block">
                    <input type="hidden" name="UrseId" />
                    <input type="text" name="UserCode" lay-verify="required" placeholder="请输入用户编码" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>

            @* 用户中文名 *@
            <div class="layui-form-item">
                <label class="layui-form-label">用户中文名</label>
                <div class="layui-input-block">
                    <input type="text" name="UserName" lay-verify="required" placeholder="请输入用户中文名" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>

            @* 部门名称 *@
            <div class="layui-form-item layui-inline" style="margin-top:20px;width: 100%;">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-inline layui-col-xs12" style="width: 68%;">
                    <select name="DepartmentId" class="layui-input">
                        @foreach (var item in departments)
                        {
                            <option value="@item.DepartmentId">@item.DepartmentName</option>
                        }
                    </select>
                </div>
            </div>

            @* 用户角色 *@
            <div class="layui-form-item layui-inline" style="margin-top:20px;width: 100%;">
                <label class="layui-form-label">用户角色</label>
                <div class="layui-input-inline layui-col-xs12" style="width: 68%;">
                    <select name="RoleId" class="layui-input">
                        @foreach (var item in roles)
                        {
                            <option value="@item.RoleId">@item.RoleName</option>
                        }
                    </select>
                </div>
            </div>

            @* 用户职位 *@
            <div class="layui-form-item" style="margin-top:20px;">
                <label class="layui-form-label">用户职位</label>
                <div class="layui-input-block">
                    <input type="text" name="UserPosition" lay-verify="required" placeholder="请输入用户职位" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>

            @* 用户级别 *@
            <div class="layui-form-item">
                <label class="layui-form-label">用户级别</label>
                <div class="layui-input-block">
                    <input type="radio" name="UserLevel" value="false" title="职员" checked>
                    <input type="radio" name="UserLevel" value="true" title="领导">
                </div>
            </div>

            @* 坐席工号 *@
            <div class="layui-form-item">
                <label class="layui-form-label">坐席工号</label>
                <div class="layui-input-block">
                    <input type="text" name="AgentNo" lay-verify="required" placeholder="请输入坐席工号" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>

            @* 坐席密码 *@
            <div class="layui-form-item">
                <label class="layui-form-label">坐席密码</label>
                <div class="layui-input-block">
                    <input type="text" name="AgentPasswore" lay-verify="required" placeholder="请输入坐席密码" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>
            @* 坐席电话 *@
            <div class="layui-form-item">
                <label class="layui-form-label">坐席电话</label>
                <div class="layui-input-block">
                    <input type="text" name="AgentTelephone" lay-verify="required" placeholder="请输入坐席电话" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>
            @* 联系方式 *@
            <div class="layui-form-item">
                <label class="layui-form-label">联系方式</label>
                <div class="layui-input-block">
                    <input type="text" name="Contact" lay-verify="required" placeholder="请输入联系方式" autocomplete="off" class="layui-input" style="width:87%">
                </div>
            </div>

            @* 用户状态 *@
            <div class="layui-form-item">
                <label class="layui-form-label">用户状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="UserSatus" value="false" title="禁用" checked>
                    <input type="radio" name="UserSatus" value="true" title="可用">
                </div>
            </div>


            @* 提交表单 *@
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="btnSave">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>


    <script>
        var pageIndex;
        var form;
        var treeTable;
        layui.use(function () {
            treeTable = layui.treeTable;
            var layer = layui.layer;
            var dropdown = layui.dropdown;
            form = layui.form;
            // 渲染
            var inst = treeTable.render({
                elem: '#ID-treeTable-demo',
                id: "test",
                url: '/UserInfo/getUserInfoList',
                toolbar: '#TPL-treeTable-demo',
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'UserCode', title: '用户编码', sort: true },
                    { field: 'UserName', title: '用户名', },
                    {
                        field: 'DepartmentName', title: '部门名称'
                    },
                    {
                        field: 'CreationTime', title: '创建时间', templet: function (res) {
                            return res.CreationTime
                        }
                    },
                    { field: 'UserPosition', title: '用户职位', sort: true },

                    { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools" }
                ]],
                page: true,
                tree: {
                    view: {
                        showIcon: true,
                        dblClickExpand: true,
                        expandAllDefault: false,
                        icon: "layui-icon-mike",
                        indent: 16
                    }
                }
            });
            // 表头工具栏工具事件
            treeTable.on("toolbar(test)", function (obj) {
                var config = obj.config;
                var tableId = config.id;
                var status = treeTable.checkStatus(tableId);
                // 获取选中行
                if (obj.event === "addInfo") {
                    //bindSelect();
                    pageIndex = layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '450px'],
                        title: '添加类型信息',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: false, // 点击遮罩区域，关闭弹层
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $("#divContent"),
                        cancel: function (index, layero, that) {
                            clearForm();
                            layer.close(index);
                            $("#divContent").css("display", "none");
                        }
                    });
                }
            });

            // 单元格工具事件
            treeTable.on('tool(' + inst.config.id + ')', function (obj) {
                var layEvent = obj.event; // 获得 lay-event 对应的值
                var trElem = obj.tr;
                var trData = obj.data;
                var tableId = obj.config.id;
                console.log(trData);
                //bindSelect();
                //编辑
                if (layEvent === "edit") {
                    form.val("formInfo", {
                        UrseId: trData.UrseId,
                        DepartmentId: trData.DepartmentId,
                        UserCode: trData.UserCode,
                        UserName: trData.UserName,
                        CreationTime: trData.CreationTime,
                        UserSatus: trData ? "true" : "false",
                        UserPassword: trData.UserPassword,
                        UserPosition: trData.UserPosition,
                        UserLevel: trData.UserLevel ? "true" : "false",
                        AgentNo: trData.AgentNo,
                        AgentPasswore: trData.AgentPasswore,
                        AgentTelephone: trData.AgentTelephone,
                        Contact: trData.Contact
                    })


                    pageIndex = layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '450px'],
                        title: '编辑用户信息',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: false, // 点击遮罩区域，关闭弹层
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $("#divContent"),
                        cancel: function (index, layero, that) {
                            clearForm();
                            layer.close(index);
                            $("#divContent").css("display", "none");
                        }
                    });
                }
                //添加子节点
                else if (layEvent === "addChild") {
                    form.val("formInfo", {
                        // CaseParentId: trData.id
                    })

                    pageIndex = layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '450px'],
                        title: '添加用户信息',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: false, // 点击遮罩区域，关闭弹层
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $("#divContent"),
                        cancel: function (index, layero, that) {
                            clearForm();
                            layer.close(index);
                            $("#divContent").css("display", "none");
                        }
                    });
                } else if (layEvent === "delete") {
                    layer.confirm('确定要删除吗？', { icon: 3 }, function () {
                        $.ajax({
                            url: "/UserInfo/Delete",
                            type: "post",
                            data: { ids: trData.UrseId },
                            success: function (res) {
                                if (res.res) {
                                    layer.msg("删除成功", { icon: 1 });
                                    tableReload();
                                } else {
                                    layer.msg("删除失败", { icon: 2 });
                                }
                            }
                        })
                    }, function () {
                        layer.msg('用户取消操作', { icon: 0 });
                    });
                }
            });

            form.on('submit(btnSave)', function (data) {
                var field = data.field; // 获取表单字段值
                console.log(1123);
                $.ajax({
                    url: "/UserInfo/Save",
                    type: "post",
                    data: field,
                    success: function (res) {
                        if (res) {
                            layer.msg("保存成功!", { icon: 1 });
                            tableReload();
                            clearForm();
                            layer.close(pageIndex);
                        } else {
                            layer.msg("保存失败!", { icon: 2 });
                        }
                    }
                })
                return false; // 阻止默认 form 跳转
            });
        });

        //查询按钮
        $("#btnSearch").click(function () {
            tableReload();
        })


        //重载表格
        function tableReload() {
            treeTable.reloadData('test', {
                where: {
                    strName: $("#strName").val(),
                }
            })
        }

        //清理表单
        function clearForm() {
            form.val("formInfo", {
                UrseId: 0,
                DepartmentId: 0,
                UserCode: "",
                UserName: "",
                CreationTime: "",
                UserSatus: false,
                UserPassword: "",
                UserPosition: "",
                UserLevel: false,
                AgentNo: "",
                AgentPasswore: "",
                AgentTelephone: "",
                Contact: ""
            })
            $("#divContent").css("display", "none");
        }


    </script>
</body>
</html>
